<template>
	<div class="showBox">
		<div class="topNav">
			<div class="navtitle">
				<span class="backBtn" v-if='routename=="circleComment"'>
					<router-link :to="{path:'/movieClipIndex/movieClips'}">
						<
					</router-link>
				</span>
				<span class="backBtn" v-else-if='routename=="circleHot"'>
					<router-link :to="{path:'/circleComment'}">
						<
					</router-link>
				</span>
				<span class="backBtn" v-else-if='routename=="circleCare"'>
					<router-link :to="{path:'/circleComment'}">
						<
					</router-link>
				</span>
				<span class="backBtn" v-else-if='routename=="circleMainBody"'>
					<router-link :to="{path:'/circleComment'}">
						<
					</router-link>
				</span>
				<span class="backBtn" v-else-if='routename=="publishcircle"'>
					<router-link :to="{path:'/circleComment'}">
						<span class="cancel">取消</span>
					</router-link>
				</span>
				<div class="navmiddle">		
					<span class="text" v-if='routename=="circleComment"'>
						圈子
					</span>	
					<span class="text" v-else-if='routename=="circleHot"'>
						圈子
					</span>	
					<span class="text" v-else-if='routename=="circleCare"'>
						圈子
					</span>	
					<span class="text" v-else-if='routename=="circleMainBody"'> 
						圈子正文
					</span>	
					<span class="text" v-else-if='routename=="publishcircle"'> 
						发圈子
					</span>	
					<span class="logo" @click="dropDown" v-if='routename=="circleComment"'>
						<img src="../../../assets/images/circle/23/circle_to_down_arrow.png" alt="" />
					</span>
					<span class="logo" @click="dropDown" v-else-if='routename=="circleHot"'>
						<img src="../../../assets/images/circle/23/circle_to_down_arrow.png" alt="" />
					</span>
					<span class="logo" @click="dropDown" v-else-if='routename=="circleCare"'>
						<img src="../../../assets/images/circle/23/circle_to_down_arrow.png" alt="" />
					</span>
				</div>
				<span class="issue" v-if='routename=="circleComment"'>
					<router-link :to="{path:'/publishcircle'}">
						<img src="../../../assets/images/circle/23/circle_edit_icon_normal.png" alt="" />
					</router-link>
				</span>
				<span class="issue" v-if='routename=="circleHot"'>
					<router-link :to="{path:'/publishcircle'}">
						<img src="../../../assets/images/circle/23/circle_edit_icon_normal.png" alt="" />
					</router-link>
				</span>
				<span class="issue" v-if='routename=="circleCare"'>
					<router-link :to="{path:'/publishcircle'}">
						<img src="../../../assets/images/circle/23/circle_edit_icon_normal.png" alt="" />
					</router-link>
				</span>
				<span class="fasong" v-else-if='routename=="publishcircle"' @click="publishEvent">
					发送
				</span>
			</div>
		</div>
		<div class="dropdown" v-if="flag">
			<router-link :to="{name:'circleComment'}" router-link-active>
				<span>全部</span>
			</router-link>
			<router-link :to="{name:'circleHot'}" router-link-active>
				<span>热门</span>
			</router-link>
			<router-link :to="{name:'circleCare'}" router-link-active>
				<span>关注</span>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				flag:false,
				routename:'',
				num:0
			}
		},
		methods:{
			dropDown(){
				this.flag=!this.flag;
			},
			publishEvent(){
				this.$message('发送成功!')
			}
		},
		created(){
			this.routename=this.$route.name;
		}	
	}
</script>

<style scoped lang="less">
@current:100rem;
.showBox{
	position: relative;
	z-index: 666;
	.topNav{
		background: #A54BE8;
		height: 88/@current;
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		.navtitle{
			position: relative;
			.backBtn{
				z-index: 888;
				position: absolute;
				font-size: 45/@current;
				margin-left: 40/@current;
				margin-top: 14/@current;
				a{
					color:white;
				}
				.cancel{
					font-size: 30/@current;
				}
			}
			.navmiddle{
				position: absolute;
				top:21/@current;
				display: inline-block;
				width: 100%;
				text-align: center;
				font-size: 36/@current;
				color:white;
				img{
					position: absolute;
					top:17/@current;
					width: 20/@current;
					height: 20/@current;
					margin-left: 15/@current;
				}
			}
			.issue{
				display: inline-block;
				position: absolute;
				top:-45/@current;
				right: 50/@current;
				img{
					width: 30/@current;
					height: 30/@current;
				}
			}
			.fasong{
				display: inline-block;
				position: absolute;
				top:25/@current;
				right: 50/@current;
				font-size: 30/@current;
				color:#fff100;
			}
		}
	}	
	.dropdown{
		width: 100%;
		height: 88/@current;
		background-color: #AD5BEA;
		position: absolute;
		top:0;
		z-index: 66;
		overflow: hidden;
		span{
			display: inline-block;
			width: 100/@current;
			height: 50/@current;
			border-radius: 30/@current;
			font-size: 30/@current;
			color: white;
			float: left;
			text-align: center;
			margin-top: 13/@current;
			padding:5/@current 20/@current;
			margin-left: 55/@current;
		}
		.router-link-exact-active{
			span{
				background: #9541D3;
			}
		}
	}
}
</style>